<template>
    <div class="info">
        <ul class="info-left">
            <li class="act">
                <div class="query-like">
                    <el-autocomplete
                            v-model="queryLikeStr"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="服务名称或编码搜索"
                            @select="handleSelect"
                            @focus="initEsbserviceList"
                            class="query-input"
                    ></el-autocomplete>
                    <el-button class="query-button" type="primary" @click="queryLike(queryLikeStr)">查询</el-button>
                </div>
                <div class="td"> </div>
                <div class="bd"
                     :class="{'acted': mAct == item.esbserviceid}"
                     v-for="(item, index) in esbInboundMainVoList"
                     @click="itemClick(item.esbserviceid)">
                    <p class="p1">{{item.servname}}</p>
                    <p class="p2">{{item.servcode}}@{{item.servversion}}</p>
                    <!--<span v-if="item.exceptionFlag == !0 && item.exceptionFlag !== null" class="nums">{{item.exceptionCount}}</span>-->
                    <span v-if="!(item.exceptionCount == 0) && !(item.exceptionCount == null)" class="nums">{{item.exceptionCount}}</span>
                    <div class="right-triangle"></div>
                </div>
            </li>
        </ul>
        <!--<v-service v-if="mAct != 0" :esbServiceId="showId" :showRadar="true" ></v-service>-->
        <v-service v-if="mAct != 0" :esbServiceId="showId" :module="showModule"
                   :dependentResource="showResource" :showRadar="true"></v-service>
    </div>
</template>

<script>
    import vService from '../views/Service';
   // import vService from '../center/Service';
    import { get, post } from '@/utils/request.js';

    export default {
        name: "SubAction.vue",
        data() {
            return {
                mAct:0,
                subActionList: [],
                exceptions: {},
                esbInboundMainVoList: [],
                showId: 0,
                queryLikeStr:"",
                //restaurants:[{"value":"33.1075.cancelCustOrder@取消客户订单@1.0"},{"value":"33.1075.qryBatckTaskByDate@批量任务列表查询服务@1.0"},{"value":"33.1075.queryCustomerOrderList@客户订单列表查询服务@1.0"},{"value":"33.1075.qryProdCustomerOrderDetail@根据主产品订单项ID查询客户订单详情@1.0"},{"value":"33.1075.queryExistModifyOrder@2.0查询在途单功能@1.0"},{"value":"33.1075.receiveCustAcctStart@接收客户状态@1.0"},{"value":"33.1075.receiveCustAcct@isale2.0对接3.0客账户受理@1.0"},{"value":"33.1075.creatCustOrder@转资产订单生成服务@1.0"},{"value":"33.1075.wtBankService@银行调用3.0客账户接口@1.0"},{"value":"33.1075.crmChannelCustService@CRM调用3.0客账户接口@1.0"},{"value":"33.1075.peopleBankService@银行调用3.0客账户接口@1.0"},{"value":"33.1075.0828dubbotest02@0828dubbotest02@1.0"},{"value":"33.1075.receiveCustAcctContinue@接收客户@1.0"},{"value":"33.1075.brushCustomerOrder@资产刷新服务@1.0"},{"value":"33.1075.receiveCustAcctExternalSystem@外系统对接3.0客账户受理@1.0"},{"value":"33.1075.receiveBatchReq@批量接收服务@1.0"},{"value":"33.1075.qryCustomerOrderDetail@客户订单详情查询服务@1.0"},{"value":"33.1075.qryBatchTaskDetailByPage@批量任务详情查询服务@1.0"},{"value":"33.1075.qryCustomerOrderDto@客户订单Dto查询服务@1.0"}],
                restaurants:[],
                state: '',
                timeout:  null,
                showModule: "",
                showResource: ""
            }
        },
        props: ['treeId','systemId'],
        components: {
            vService
        },
        watch: {
            treeId(newValue, oldValue) {
                if (newValue != 0 && newValue != oldValue) {
                    this.loadEsbService(newValue, this.systemId);
                }
            }
        },
       /* mounted:function(){
        },*/
        created:function(){
        },
        methods:{
            loadSubAction(treeId,systemId) {
            },
            initEsbserviceList(){
               if(this.systemId == undefined) return;
                get('/esbview/esb-inbound-main/queryBySystemId/' + this.systemId, '').then(res => {
                    console.log("-- initEsbserviceList--res.esbinboundmainBean--"+res.esbinboundmainBean[0].value);
                    this.restaurants = res.esbinboundmainBean;
                    console.log("-- initEsbserviceList--res.restaurants--"+this.restaurants);
                   return res.esbinboundmainBean;
                });

            },
            loadEsbService(treeId,systemId) {
                if(systemId == undefined || treeId == undefined) return;
                get('/esbview/esb-inbound-main/queryByBusinessType/' + systemId + '/' + treeId, '').then(res => {
                    this.esbInboundMainVoList = res.inboundMainList;
                    this.mAct = this.esbInboundMainVoList[0].esbserviceid;
                    console.log(res.msg);

                    this.itemClick(this.mAct);
                });


            },

            itemClick(serviceId) {
                this.mAct = serviceId;
                this.showId = serviceId;
            },
            queryLike(queryLikeStr){
                this.esbInboundMainVoList = [];
                if(this.systemId == undefined || queryLikeStr == undefined) return;
                get('/esbview/esb-inbound-main/queryByServcode/' + this.systemId + '/' + queryLikeStr, '').then(res => {
                    this.esbInboundMainVoList = res.esbinboundmainBean;
                    this.mAct = this.esbInboundMainVoList[0].esbserviceid;
                    console.log(res.msg);
                    this.itemClick(this.mAct);
                });
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (queryLikeStr) => {
                    return (!(queryLikeStr.value.indexOf(queryString) === -1));
                };
            },
            handleSelect(item) {
                console.log(item);
            }

        }
    }
</script>

<style lang="scss" scoped>
    $borderColor: #e4e7f0;
    $actBorderColor: #ffc5b9;
    $actColor: #f58e7a;
    .info .title {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        font-size: 16px;
        font-weight: bold;
        padding: 0 20px;
        color: #333;
    }
    .info {
        display: flex;
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid $borderColor;
        border-radius: 3px;
        background-color: #fff;

        .info-left {
            width: 200px;
            padding-left: 10px;
            padding-top: 15px;

            .td {
                margin-bottom: 15px;
                width: 102px;
                height: 25px;
                padding-left: 8px;
                line-height: 25px;
                /*border: 1px solid $borderColor;*/
                position: relative;
                text-align: left;
                font-size: 12px;
                border-radius: 3px;


                .tips {
                    position: absolute;
                    top: -3px;
                    right: -4px;
                }
            }

            .bd {
                /*width: 112px;*/
                height: 36px;
                /*margin-left: 25px;*/
                border-radius: 3px;
                font-size: 12px;
                border: 1px solid $borderColor;
                padding-top: 9px;
                padding-left: 8px;
                margin-bottom: 15px;
                position: relative;


                .lights {
                    position: absolute;
                    top: -6px;
                    right: 0;
                }

                .p1 {
                    font-size: 12px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .p2 {
                    font-size: 10px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .nums {
                    position: absolute;
                    top: -6px;
                    right: -15px;
                    border: 1px solid #fff;
                    border-radius: 15px;
                    color: #fff;
                    width: 25px;
                    height: 15px;
                    line-height: 17px;
                    font-size: 12px;
                    padding-left: 15px;
                    background: url(../../../assets/img/attention-fff.png) 3px 50% no-repeat #ed795a;
                    background-size: 13px;
                }
            }

            .act {
                .acted {
                    background-color: $actColor;
                    color: #fff;

                    .right-triangle {
                        width: 0;
                        height: 0;
                        position: absolute;
                        top: 14px;
                        right: -6px;
                        border-top: 9px solid transparent;
                        border-left: 6px solid $actColor;
                        border-bottom: 9px solid transparent;
                    }
                }

                .td {
                    border-color: $actBorderColor;
                }

                .query-like {
                    display: flex;
                    .query-input {
                        display: inline-block;
                        border-radius: 5px;
                        border: 1px solid gray;
                    }
                    .query-button{
                        display: inline-block;
                    }
                }
            }
        }
    }
</style>